<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="登录人员:" prop="loginName">
          <el-input
            v-model="formModel.loginName"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="时间范围:" prop="beginTime">
          <el-date-picker
            v-model="dateRange"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button
              v-if="hasPermission('loginLog_select')"
              type="primary"
              plain
              @click="queryList(false)"
            >查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <hey-table ref="table" :table-data="tableData" :columns="columns" :auto-width="false">
      <template slot="tools">
        <el-table-column
          label="操作"
          width="80"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span
              v-if="hasPermission('loginLog_del')"
              class="hey_tools_btn"
              @click="handleDelete(row)"
            >删除</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
  </div>
</template>

<script>

export default {
  name: 'LoginLogList',
  props: {},
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 日期范围
      dateRange: [],
      tableData: [],
      // 查询条件
      formModel: {
        loginName: '',
        beginTime: '',
        endTime: ''
      },
      columns: [
        { title: '登录人员', key: 'loginName' },
        { title: 'IP地址', key: 'loginIp' },
        { title: '操作地点', key: 'loginAddr' },
        { title: '操作时间', key: 'loginTime' },
        { title: '登录类型', key: 'loginType', clcd: 'login_type' }
      ]
    }
  },
  computed: {},
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() {
      if (this.dateRange != null && this.dateRange !== '') {
        this.formModel.beginTime = this.dateRange[0]
        this.formModel.endTime = this.dateRange[1]
      } else {
        this.formModel.beginTime = ''
        this.formModel.endTime = ''
      }
      this.$refs.table.query('/loginLog/pageLoginLog', this.formModel, '', false)
    },
    handleDelete(row) {
      this.$sure('确认删除？', _ => {
        this.post('/loginLog/deleteLoginLog', {
          loginLogId: row.loginLogId
        }).then(_ => {
          this.$info('删除成功', this.queryList)
        })
      })
    }
  }
}
</script>
